<template>
	<view class="mine-main">
		<!-- 头部 -->
		<view class="head">
			<view class="avatar-area">
				<image :src="iconn" v-model="iconn" class="img" @tap="amend"></image>
				<view class="user-info">
					<view v-model="nickname">{{nickname}}</view>
					<view v-model="phone">{{phone}}</view>
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="btns">
			<navigator url="./login/sign/sign" class="btn btn-reg">注册</navigator>
			<navigator url="./login/login" class="btn btn-login">登录</navigator>
		</view>
		
		<!-- 我的订单 -->
		<view class="my-orders">
			<view class="title">我的订单</view>
			<view class="navs">
				<view class="nav-item" v-for="(item,index) in myOrders" :key="index">
					<navigator class="nav" :url="item.url">
						<image :src="item.src"></image>
						<view class="text">{{item.name}}</view>
					</navigator>
				</view>
			
			</view>
		</view>
		
		<!-- 最下面 -->
		<view class="grid-block">
			<view class="uni-grid-item" v-for="(item,index) in gridBloc" :key="index">
				<navigator hover-class="none" :url="item.url" class="nav">
					<image class="img" :src="item.src"></image>
					<view  class="text">{{item.name}}</view>
				</navigator>
				<!-- <navigator url=""></navigator> -->
			</view>
		
		</view>
		
	</view>
</template>

<script>
	import { getMemberInfo } from"@/api/user/index.js"
	import mix from "@/mixins/index.js"
	export default {
		mixins:[mix], 
		data() {
			return {
				iconn:'',
				nickname:"hi~",
				phone:"您还没有登录那",
				myOrders:[
					{
						name:"代付款",
						src:"../../static/icons/icon-pay.png",
						url:`order/order?type=${0}`
					},
					{
						name:"已付款",
						src:"../../static/icons/pay-done.png",
						url:`order/order?type=${1}`
					},
					{
						name:"已发货",
						src:"../../static/icons/icon-car.png",
						url:`order/order?type=${2}`
					},
					{
						name:"已收货",
						src:"../../static/icons/icon-done.png",
						url:`order/order?type=${3}`
					},
					{
						name:"售后",
						src:"../../static/icons/icon-back.png",
						url:`order/order?type=${4}`
					},
				],
				gridBloc:[
					{
						name:"商品收藏",
						src:"../../static/icons/save.png",
					},
					{
						name:"品牌",
						src:"../../static/icons/brand.png",
					},
					{
						name:"文章收藏",
						src:"../../static/icons/pay-done.png",
					},
					{
						name:"地址",
						src:"../../static/icons/address.png",
						url:"./Addres/Addres"
					},
					{
						name:"卡包",
						src:"../../static/icons/card.png",
					},
					{
						name:"购物车",
						src:"../../static/icons/cart2.png",
						url:"car/car"
					},
					{
						name:"联系客服",
						src:"../../static/icons/kf.png",
					}
				],
			};
			
			
		},
		
		onLoad(formal){
			
			
			
		},
		created( option ) {
		//胶囊距离
		// ifdef 让在特殊注释里面的代码仅在某一平台才会生效
		// #ifdef MP-WEIXIN
			var menu = uni.getMenuButtonBoundingClientRect();
			// console.log("获取到的按钮信息为",uni.getMenuButtonBoundingClientRect())
			// var _this = this;
			this.h = menu.height + menu.top;
		// #endif	
		},
		onShow() {
			
			// this.checkLogin()  //封装的判断是否登录
			//用户没有登录也不能发送这个请求
			if(this.checkLogin()){
				// 获取个人信息
				getMemberInfo()
				.then(res=>{
					console.log("获取到个人信息",res);
					this.phone=res.data.userInfo.phone; //登录名
					this.nickname =res.data.userInfo.nickname;
					this.iconn=res.data.userInfo.icon;
					uni.setStorageSync("toten_use",res.data) //把登录的名字存到本地
				});
			}
		},
		methods:{
			amend(){
				uni.navigateTo({
					url:"./updateUserInfo/updateUserInfo"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.mine-main{
	padding-top:var(--status-bar-height);
	background-color: #F1ECE7;
	// 头部
	.head{
			display: flex;
		    justify-content: space-between;
		    width: 100%;
		    height: 75px;
		    padding-top: 30px;
		.avatar-area{
			display: flex;
			align-items: center;
			height: 75px;
			padding-left: 40rpx;
			.img{
				width: 75px;
				height: 75px;
				border-radius: 50%;
				background-color: #c8c7cc;
			}
			.user-info{
				margin-left: 16px;
				height: 75px;
				color: #435950;
				font-size: 14px;
				box-sizing: border-box;
				view{
					padding: 20rpx 0;
				}
			}
		}
	}
	// 按钮
	.btns{
		display: flex;
		margin-top: 40rpx;
		justify-content: space-evenly;
		.btn{
			width: 91px;
			height: 38px;
			box-sizing: border-box;
			border: 1px solid #354e44;
			color: #354e44;
			font-size: 15px;
			text-align: center;
			line-height: 38px;
			border-radius: 5px;
			margin: 0 15px;
		}
		.btn-login{
			background-color: #354e44;
			color: #fff;
		}
	}
	//我的订单
	.my-orders{
		    width: 670rpx;
		    height: 208rpx;
		    border-radius: 4rpx;
		    background-color: #fff;
		   margin: 60rpx auto;
		.title{
			    height: 76rpx;
			    font-size: 26rpx;
			    line-height: 76rpx;
			    border-bottom: 2rpx solid #ddd;
			    box-sizing: border-box;
			    margin: 0 54rpx;
		}
		.navs{
			display: flex;
			justify-content: space-between;
			 padding: 0 54rpx;
			    
			.nav-item{
				// display: flex;
				// align-items: center;
				// flex-direction: column;
				.nav{
					display: flex;
					align-items: center;
					flex-direction: column;
					image{
							width: 40rpx;
							height: 40rpx;
							margin-top: 20rpx;
						}
					.text{
						margin-top: 20rpx;
						font-size: 26rpx;
						line-height: 36rpx;
					
					}
				}
					
			}
		}
	}
	// 最下面
	.grid-block{
		width: 670rpx;
		margin: 60rpx auto;
		display: flex;
		flex-wrap: wrap;
		min-height: 200rpx;
		background-color: #FFFFFF;
		.uni-grid-item{
			width: 33%;
			margin-bottom: 40rpx;
			display: flex;
			flex-direction: column;
			 align-items: center;
			 .nav{
				display: flex;
				flex-direction: column;
				align-items: center;
				 .img{
				 	width: 50rpx;
				 	height: 50rpx;
				 	margin: 30rpx auto;
				 }
				 .text{
				 	font-size: 26rpx;
				 	line-height: 38rpx;
				 }
			 }
			
		}
	}
}
</style>
